<template>
  <el-dialog
    title="修改密码"
    :visible.sync="dialogVisible"
    width="568px"
    class="pwdCon"
  >
    <el-form :model="form" label-width="85px">
      <el-form-item label="原始密码：" prop="oldpassword">
        <el-input maxlength="20"
          v-model="form.oldpassword"
          type="password"
          placeholder="请输入原始密码"
        ></el-input>
      </el-form-item>
      <el-form-item label="新密码：" prop="newPassword">
        <el-input maxlength="20"
          v-model="form.newPassword"
          type="password"
          placeholder="请输入新密码，最多20位"
        ></el-input>
      </el-form-item>
      <el-form-item label="确认密码：" prop="affirmPassword">
        <el-input maxlength="20"
          v-model="form.affirmPassword"
          type="password"
          placeholder="请再次输入新密码，最多20位"
        ></el-input>
      </el-form-item>
    </el-form>
    <div  class="dialog_footer">
      <el-button @click="handlePwdClose">取 消</el-button>
      <el-button type="primary" @click="handleSave(form)">保 存</el-button>
    </div>
  </el-dialog>
</template>
<script >
// 公共组件
import Bus from '@/utils/EventBus'
import { editpassword } from '@/api/login'
import { getuserName } from '@/utils/storage'
export default {
  name: 'PasswordIndex',
  data () {
    return {
      dialogVisible: false,
      form: {
        oldpassword: '',
        newPassword: '',
        affirmPassword: ''
      }
    }
  },
  created () {
    Bus.$on('sendMsg', (msg) => {
      this.dialogVisible = msg
    })
  },
  /* 事件解绑 */
  beforeDestroy () {
    Bus.$off('sendMsg')
  },
  methods: {
    handlePwdClose () {
      this.dialogVisible = false
      //
    },
    async handleSave (form) {
      // 获取用户名
      console.log(form.oldpassword, 'form.oldpassword')
      const username = getuserName()
      if (form.newPassword !== form.affirmPassword) {
        this.$message.error('两次密码输入不一致')
        return
      }
      //
      const res = await editpassword(username, form.oldpassword, form.newPassword)
      if (res.code === 1) {
        this.$message.success('恭喜你，密码修改成功')
        this.dialogVisible = false// 刷新
      }
    }
  }
}

</script>
<style lang="less" scoped>
.pwdCon {
  .el-dialog__body {
    padding-top: 60px;
    padding: 60px 100px 0;
  }
  .el-input__inner {
    padding: 0 12px;
  }
  .el-form-item {
    padding-left: 60px;
    margin-bottom: 26px;
  }
  .el-form-item__label {
    text-align: left;
  }
  .el-dialog__footer {
    padding-top: 14px;

  }
}
.dialog_footer{
  padding-left: 100px;

  .el-button{
    margin:40px
  }
}
.el-input{
  width: 300px;
}

</style>
